<template>
  <div class="compare">
    <PageTop firstMenu="配料管理" secondMenu="库存盘点" title="库存盘点" :showAddBtn="false"></PageTop>

    <div v-if="showFirst" class="container">
      <div class="one">
      <div>1. 配料库存数据下载</div>
        <el-button plain class="bs" size="small" type="primary" @click="downLoad">下载</el-button>
      </div>
      <div class="two">
        <div>2. 添加盘点数据</div>
            <el-button plain class="bs" v-if="!isLoad" size="small" type="primary" @click="upload">点击上传</el-button>
            <el-button plain class="bs" v-else disabled size="small" type="primary" @click="upload">上传完成</el-button>
            <input 
            id="file"
            type="file"
            :style="{display: 'none'}"
            ref="input"
            @change="changeFile"
            @submit="submit"/>  
      </div>
      
      <el-button class="btn" :style="{'width':'300px'}" size="small" type="primary" @click="next">下一步</el-button>
    </div>
    <div class="second" v-if="!showFirst">
        <el-table
          :data="tableData"
          style="width: 100%"
          :border="true"
          :fit="true"
          :stripe="true"
          size="mini"
          align="center">
          <el-table-column
            prop="materials_number"
            label="配料编号"
            min-width="100"
            align="center">
          </el-table-column>

          <el-table-column
            prop="material_name"
            label="配料名称"
            min-width="140"
            align="center">
          </el-table-column>

          <el-table-column
            prop="format_name"
            label="规格/型号"
            min-width="110"
            align="center">
          </el-table-column>

          <el-table-column
            prop="material_unit"
            label="单位"
            min-width="110"
            align="center">
          </el-table-column>

          <el-table-column
            prop="max"
            label="库存上限"
            min-width="100"
            align="center">
          </el-table-column>

          <el-table-column
            prop="min"
            label="库存下限"
            min-width="100"
            align="center">
          </el-table-column>

          <el-table-column
            prop="stock"
            label="库存量"
            min-width="140"
            align="center">
          </el-table-column>

          <el-table-column
            prop="pan_dian_number"
            label="盘点数量"
            min-width="140"
            align="center">
          </el-table-column>

          <el-table-column
            prop="result"
            label="库存盈亏"
            min-width="150"
            align="center">
          <template slot-scope="scope">
              <div class="tit-pic">
                <div class="pic" :class="scope.row.result>0?'a':scope.row.result<0?'b':''">{{scope.row.result>0?'+'+scope.row.result:scope.row.result}}</div>
              </div>
            </template>
          </el-table-column>

        </el-table>
      <div class="btn-wrap">
        <el-button class="btn" plain :style="{'width':'100px'}" size="small" type="primary" @click="close">取消</el-button>
        <el-button class="btn" :style="{'width':'100px'}" size="small" type="primary" @click="confirm">确认导入</el-button>
      </div>
    </div>

    <el-dialog
      v-if="showDialog"
      :visible="true"
      :show-close="false"
      width="350px">
      <div class="font">导入成功</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jump">进入库存列表</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
import PageTop from '@/components/pageTop.vue';

@Component({
  components: {
    PageTop,
    saveBtn
  }
})
export default class StockCheck extends Vue {
  createRes!: ajaxResquest;
  uploadRes!: ajaxResquest;

  tableData: any[] = [];

  inCount: string = '';
  tableRemark: string = '';
  showMask: boolean = false;

  showFirst: boolean = true;
  token: any = sessionStorage.getItem('token');
  fileList: any[] = [];
  $refs!: any;
  $baseUrl!: any;
  isLoad: boolean = false;
  showDialog: boolean = false;
  doName: string = '';

  mounted() {
    this.uploadRes = new ajaxResquest('/materials/materialsCompare');
    this.createRes = new ajaxResquest('/materials/loadMaterialsCompareData');
  }
  downLoad() {
    console.dir(Window);
    let a = document.createElement('a');
    a.href = `${
      this.$baseUrl
    }/materials/materialsStockListExport?Authorization=${sessionStorage.token}`;
    a.target = '_blank';
    a.click();
  }
  next() {
    console.log(this.tableData);
    console.log(this.tableData.length === 0);

    if (this.tableData.length === 0) {
      alert('还未上传任何数据');
    } else {
      this.showFirst = false;
    }
  }
  upload() {
    this.$refs.input.click();
  }
  submit() {
  }
  changeFile(e: any) {
    console.log(e.target.files[0]);
    this.fileList = e.target.files;
    if (this.fileList.length > 0) {
      let form = new FormData();
      form.append('file', this.fileList[0]);
      this.uploadRes.getFunction(form).then((res: any) => {
        if (res.data.code === 1) {
          this.tableData = res.data.data.types;
          this.doName = res.data.data.doName;
          this.isLoad = true;
        }
        console.log(res.data.data);
      });
    }
  }
  close() {
    this.tableData = [];
    this.showFirst = true;
    this.isLoad = false;
  }
  confirm() {
    let data = JSON.stringify(this.tableData);
    this.createRes
      .getFunction({ data: data, doName: this.doName })
      .then((res:any) => {
        if (res.data.code === 1) {
          this.showDialog = true;
        }
      });
  }
  jump() {
    this.$to('accessStock');
  }
  opload(response: any, file: any, fileList: any) {}
}
</script>
<style lang="less">
.compare {
  // height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow-y: auto;
  text-align: left;
  #file {
    display: none;
  }
  .second {
    text-align: center;
    .btn-wrap {
      margin-top: 15px;
    }
  }
  .container {
    margin-bottom: 50px;
  }
  .one {
    margin-top: 40px;
    margin-bottom: 30px;
  }
  .bs {
    margin-top: 15px;
    margin-bottom: 20px;
  }
  .a {
    color: #66cccc;
  }
  .b {
    color: #cc0000;
  }
}
</style>
